<script setup>
import { ref } from 'vue'
import Home from '../components/test6/Home.vue'
import Post from '../components/test6/Post.vue'
import Archive from '../components/test6/Archive.vue'

const tabs = {
    Home, Post, Archive
}
const currentTab = ref('Home')
</script>

<template>
    <button
    v-for="(_, t) in tabs" :key="t"
    :class="['tabButton', { active: t === currentTab}]"
    @click="currentTab = t">{{ t }}</button>
    <component :is="tabs[currentTab]"></component>
</template>

<style>
.tabButton {
    border-top-left-radius: .2rem;
    border-top-right-radius: .2rem;
    border: 1px solid #ccc;
    margin-left: -1px;
    font-size: 1rem;
}
.tabButton:hover {
    cursor: pointer;
    background-color: #e0e0e0;
}
.tabButton.active {
    background-color: #e0e0e0;
}
.tab {
    border: 1px solid #ccc;
    margin-left: -1px;
    margin-top: -1px;
    padding: 10px;
    border-radius: .2rem;
    border-top-left-radius: 0;
}
</style>